<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息-最share</title>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/base.css">
    <!-- <link rel="stylesheet" href="css/font.css"> -->
    <link rel="stylesheet" href="css/chats.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="large">
        <header id="nav" v-cloak>
            <a href="/index.html">
                <div class="logo">
                    <img src="images/logo.png" alt="">
                </div>
            </a>
            <!-- 登录之后显示个人中心 -->
            <div v-show="isLogin">
                <div class="message">
                    <a href="/chat.html">
                        <img src="images/msg_1.png" alt="">
                        <span v-if="unread">{{unread}}</span>
                    </a>
                </div>

                <div class="pic" @mouseenter='showMenu' @mouseleave='hiddenMenu'>
                    <img :src="userPicture" alt="">
                    <ul :style='{display: isShow}'>
                        <a>
                            <li @click='logout'>
                                <span>退出</span>
                            </li>
                        </a>
                    </ul>
                </div>

            </div>

        </header>
    </div>
    <div class="box" id="chat" v-cloak>
        <!-- 聊天列表 -->
        <div class="chat-list">
            <!-- 顶部个人信息部分 -->
            <div class="header" v-show="flagOfSearch">
                <div class="pic2">
                    <img :src="userPicture" alt="">
                </div>
                <span v-text="username"></span>
                <div class="search-friends" @click='showBigSearch'></div>
            </div>
            <!-- 巨大的搜索框 -->
            <div class="search-input" v-show="!flagOfSearch">
                <img src="images/search.png" class="search-input-img" alt="">
                <input type="text" @blur='showSmallSearch' @keyup.13='showSmallSearch' ref="inputVal">
            </div>


            <!-- 聊天列表 -->
            <div class="friends">
                <ul ref="friendList">
                    <li :class='{current2:index == focusID}' v-for="(item,index) in friendsList" :key="index" @click='getHistory(item.friendName);getStaus(item.friendName);itemFoucs(index,item)' :ref="item.friendName">

                        <div class="friend-pic">
                            <span v-if="item.unread">{{item.unread}}</span>
                            <img :src="item.friendPicture" alt="">
                        </div>
                        <div class="name">{{item.friendName}}</div>
                        <div class="shortcut">{{item.lastMessage}}</div>
                        <div class="time">{{item.sendTime | formateDate}}</div>
                    </li>
                </ul>

            </div>
        </div>

        <!-- 聊天框 -->
        <div class="chat-content">
            <div class="unread" v-show="hasUnread">
                <span @click='scrollBottom'>&nbsp;&nbsp;↓↓ 有新消息未读&nbsp;&nbsp;|</span>
                <span @click='hideUnreadBtn'>&nbsp;×&nbsp;</span>
            </div>
            <div class="firend-name">{{currentFriendName}}</div>
            <div class="chat-middle" id="chatContainer" @scroll='scrollHistory($event)'>
                <!-- <div class="chat-time">
                    <div class="line"></div>
                    <span>2019/12/27 12:00</span>
                    <div class="line"></div>
                </div> -->
                <div class="content">
                    <ul v-if="currentFriendName != ''">
                        <li v-if="item.sendUser==username&&item.content != ''" class="me" v-for="(item,index) in currentChatHistory ">
                            <div class="image-me">
                                <img :src="userPicture" alt=" ">
                            </div>
                            <span>
                                {{item.content}} <br />
                                <div class="line"></div>
                                <div class="sendTime">{{item.sendTime}}</div>
                            </span>
                        </li>
                        <li v-else-if="item.content != ''" class="you">
                            <div class="image-friend">
                                <img :src="currentFriendPic" alt=" ">
                            </div>
                            <span>
                                {{item.content}}
                                <div class="line"></div>
                                <div class="sendTime ">{{item.sendTime}}</div>
                            </span>
                        </li>
                    </ul>
                    <div class="chatMsg" v-else>
                        请和你的好友开始聊天吧!
                    </div>
                </div>
            </div>
            <!-- 当没有选中朋友时 输入框不能输入东西 其他也都不能点击 -->
            <div v-if="currentFriendName == ''" class="chat-bottom">
                <textarea ref="messageInput" cols="30" rows="10" placeholder="请输入要发送的消息..." id="chat-bar" v-model="msgContent" disabled></textarea>
                <a href="javascript:;" class="chat-faces">
                    <img src="images/faces.png " alt=" ">
                </a>
                <a href="javascript:;" class="chat-img">
                    <img src="images/photo.png" alt=" ">
                </a>
                <button class="chat-send" @click='websocketSend' disabled>发送</button>
            </div>
            <div v-else class="chat-bottom">
                <textarea ref="messageInput" cols="30" rows="10" placeholder="请输入要发送的消息..." id="chat-bar" v-model="msgContent" @keyup.13='websocketSend'></textarea>
                <a href="# " class="chat-faces">
                    <img src="images/faces.png " alt=" ">
                </a>
                <a href="# " class="chat-img">
                    <img src="images/photo.png" alt=" ">
                </a>
                <button class="chat-send" @click='websocketSend'>发送</button>
            </div>

        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.js"></script>
    <script src="layui/layui.all.js"></script>
    <script src="js/page/isLogin.js"></script>
    <script src="js/page/nav.js"></script>
    <script src="js/page/chat.js"></script>
</body>

</html>